<template>
    <div>
        <h1>vue3组件间通信</h1>
    </div>
</template>
<script lang="ts" setup  name="Header">

</script>
<style scoped> div {
     height: 200px;
     width: 100%;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
 }

 @media only screen and (max-width: 600px) {

     /* 在屏幕宽度小于600px时应用的样式 */
     div {
         background-color: rgb(55, 232, 20);
     }
 }

 @media only screen and (min-width: 601px) and (max-width: 1024px) {

     /* 在屏幕宽度在601px到1024px之间时应用的样式 */
     div {
         background-color: rgb(128, 118, 240);
     }
 }

 @media only screen and (min-width: 1025px) {

     /* 在屏幕宽度大于1025px时应用的样式 */
     div {
         background-color: aliceblue;
     
 }
 }
</style>
  